<template>
	<view>
		<view style="margin: 20rpx;background-color: #fff;border-radius: 20rpx;">
			<u-button @click="add">添加会员</u-button>
		<next-table
    :show-header="true"
    :columns="column"
    :stripe="true"
    :fit="false"
    @rowClick="rowClick"
    @toggleRowSelection="toggleRowSelection"
    @toggleAllSelection="toggleAllSelection"
    :border="true"
    @edit="buttonEdit"
    @dele="dele"
    :data="datalist"></next-table>
	</view>
		<u-popup :show="show" @close="show=false">
			<view style="padding: 20rpx;">
				<view style="text-align: center;">{{isupdate?'编辑会员信息':'新增会员'}}</view>
				<view>
					<u--form
							labelPosition="left"
							:model="Form"
							label-width="100"
							ref="uForm"
					>
						<u-form-item
								label="姓名"
								prop="name"
								ref="item1"
						>
							<u--input
									v-model="Form.name"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="充值金额"
								prop="amount"
								borderBottom
						>
							<u--input
								type="number"
									v-model="Form.amount"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="剩余金额"
								prop="residue"
								borderBottom
						>
							<u--input
								type="number"
									v-model="Form.residue"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="电话"
								prop="tel"
								borderBottom
						>
							<u--input
								v-model="Form.tel"
								border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="性别"
								prop="sex"
								borderBottom
								@click="showSex = true; hideKeyboard()"
								ref="item1"
						>
							<u--input
									:value="Form.sex===1?'男':'女'"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择性别"
									border="none"
							></u--input>
							<u-icon
									slot="right"
									name="arrow-right"
							></u-icon>
						</u-form-item>
						<u-form-item
								v-model="Form.year"
								label="出生日期"
								
								prop="year"
								borderBottom
								@click="showTime=true;hideKeyboard()"
						>
							<u--input
								placeholder="请选择出生日期"
								disabled
								disabledColor="#ffffff"
								v-model="Form.year"
								border="none"
							></u--input>
							<u-icon
									slot="right"
									name="arrow-right"
							></u-icon>
						</u-form-item>
						<u-form-item
								label="备注"
								prop="tel"
								borderBottom
						>
							<u--input
								v-model="Form.text"
								border="none"
							></u--input>
						</u-form-item>
					</u--form>
					<u-action-sheet
							:show="showSex"
							:actions="actions"
							title="请选择性别"
							@close="showSex = false"
							@select="sexSelect"
					>
					</u-action-sheet>
					<u-calendar mode="single" @confirm="confirm" :show="showTime"></u-calendar>

					<view>
						<u-button type="primary" text="确认" @click="submit"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actions: [{
					name: '男',
					value:1,
					},
					{
						name: '女',
					value:0,
					}
				],
				showTime:false,
				showSex:false,
				isupdate:false,
				Form:{
					"name": "",
					"amount": "",
					"residue": "",
					"tel": "",
					"sex": "",
					"year": "",
					"text": ""
				},
				show:false,
				pageIndex: 1,
				pageTotal: 5,
				datalist: [],
				checkNameList: [],
				column: [
					// { type:'selection', fixed:true,width:60 },
					{ name: 'name', label: '姓名',fixed:true,width:150,emptyString:'--' },
					{ name: 'amount', label: '充值金额'},
					{ name: 'residue', label: '剩余金额'},
					{ name: 'tel', label: '电话',width:150 },
					{ name: 'sex', label: '性别',filters:{'0':'女','1':'男'}} ,
					{ name: 'year', label: '出生日期'},
					{ name: 'text', label: '备注'},
					{ name: 'operation', type:'operation',label: '操作',renders:[
						{
							name:'修改',
							func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
						},
						{
							name:'删除',
							type:'warn',
							func:"dele"
						},
					],
					}
				]
			}
		},
		methods: {
			confirm(e){
				this.showTime=false;
				this.Form.year=e[0]
			},
			sexSelect(e) {
				this.Form.sex = e.value
			},
			add(){
				this.isupdate=false;
				this.Form={
					"name": "",
					"amount": "",
					"residue": "",
					"tel": "",
					"sex": "",
					"year": "",
					"text": ""
				}
				this.show=true;
			},
			getdatalist() {
				uni.request({
					url:"https://ajh.legoetm.com/API/listhy/",
					method:"GET",
					success: (res) => {
						console.log("成功",res)
						this.datalist = res.data.rylist
					}
				})
			},
			pageChange(index) {
				this.pageIndex = index
				this.getdatalist(this.pageIndex)
			},
			dele(item) {
				let that=this;
				uni.showModal({
				    title: '提示',
				    content: '确认删除吗?',
				    success: function (res) {
				        if (res.confirm) {
							uni.request({
								url:"https://ajh.legoetm.com/API/sethy/",
								method:"POST",
								data:{
									lx:3,
									...item
								},
								success: (res) => {
									uni.showToast({
										title:'删除成功',
										icon:"none"
									})
									const index = that.datalist.findIndex(it => it.key == item.key)
									if (index != -1) {
										that.datalist.splice(index, 1)
									}
								}
							})
				        } else if (res.cancel) {
				        }
				    }
				});
			
				
			},
			toggleAllSelection(_, list) {
				this.checkNameList[this.pageIndex] = list.map(item => item.name)
			},
			toggleRowSelection(bool, list) {
				this.checkNameList[this.pageIndex] = list.map(item => item.name)
			},
			buttonEdit(item) {
				console.log(111111, item)
				this.show=true;
				this.isupdate=true;
				this.Form=item
			},
			submit(){
					//编辑
					uni.request({
						url:"https://ajh.legoetm.com/API/sethy/",
						method:"POST",
						data:{
							lx:this.isupdate?2:1,
							...this.Form
						},
						success: (res) => {
							console.log("成功",res)
							uni.showToast({
								title:this.isupdate?'修改成功':'添加成功',
								icon:"none"
							})
							this.show=false;
							this.isupdate=false;
							this.getdatalist()
						}
					})
			},
		},
		created() {
			this.getdatalist()
		}
	}
</script>

<style>

</style>
